<template>
	<view class="flex">
		<view style="display: flex; justify-content: space-between;">
			<view>
				<uni-icons color="rgb(85,182,133)" style="" :type="Cheked" size="20" @click="RefreshData"></uni-icons>
				<text style="padding-right: 10px;">
					识别结果：{{ YoloList.field7.split('|')[0] }}
				</text>
				<text style="font-size: 13px;color: #cacdd1;">
					#{{ YoloList.d_no }}
				</text>
			</view>

			<view style="display: flex; align-items: center;">
				<view
					style="width:25px;border-radius: 8px;border:1.5px solid;border-color:rgb(230,231,235);font-size: 1em;padding: 6px 3px 4px 6px;">
					<!-- <uni-link :href="YoloList.field5" text="https://uniapp.dcloud.io/" showUnderLine="false" color="black">
						<uni-icons style="" type="image" size="20"></uni-icons>
					</uni-link> -->
					<uni-icons @click="imagePreview(YoloList.field5)" type="image" size="20"></uni-icons>
				</view>
				<view
					style="margin-left: 5px;width:25px;border-radius: 8px;border:1.5px solid;border-color:rgb(230,231,235);font-size: 1em;padding: 6px 3px 4px 6px;">
					<!-- <uni-link :href="YoloList.field6" text="https://uniapp.dcloud.io/" showUnderLine="false" color="black">
						<uni-icons style="" type="images" size="20"></uni-icons>
					</uni-link> -->
					<uni-icons @click="imagePreview(YoloList.field6)" type="images" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <view style="width: 100%;"></view> -->
		<view
			style="display: flex;justify-content:space-between;align-items: center;margin-top: 10rpx;color: rgb(109,114,127)">
			<text style="font-size: 0.8em;">
				置信度：{{ YoloList.field7.split('|')[1] }}
			</text>
			<text style="font-size: 0.6em;">{{ YoloList.c_time }}</text>
		</view>
	</view>
	<uni-popup ref="preViewPopup" type="center">
		<view class="popup-content">
			<image class="preview-image" :src="previewImg" :style="{transform: 'rotate(' + imageRotate + 'deg)'}" mode="aspectFit" @click.stop=""></image>
			<view class="close-btn" @click="closePreview">
				<uni-icons type="closeempty" size="24" color="#fff"></uni-icons>
			</view>
			<view class="rotate-btn" @click="rotateImage">
				<uni-icons type="refresh" size="24" color="#fff"></uni-icons>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	/**
	 * @description yolo识别结果卡片
	 */
	export default {
		props:{
			YoloList: {
				type:Object,
				require: true,
			},
			Cheked:{
				type:String
			}
		},
		data(){
			return {
				previewImg:'',
				imageRotate: 0
			}
		},
		methods:{
			imagePreview(url){
				this.previewImg = url;
				this.imageRotate = 0; // 重置旋转角度
				this.$refs.preViewPopup.open();
			},
			closePreview() {
				this.$refs.preViewPopup.close();
			},
			rotateImage() {
				// 每次点击旋转90度
				this.imageRotate = (this.imageRotate + 90) % 360;
			}
		}
		}
</script>

<style scoped>
	.flex{
		padding: 20px 6px 20px 20px;
		background-color: white;
		border-radius: 10px;
		border: 2px solid;
		border-color: rgb(230, 231, 235);
	}
	
	.popup-content {
		position: relative;
		padding: 20rpx;
	}
	
	.preview-image {
		width: 700rpx;
		height: 700rpx;
		background-color: #333;
		border-radius: 10rpx;
		transition: transform 0.3s ease;
	}
	
	.close-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.rotate-btn {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	@media screen and (max-width: 768px) {
		.preview-image {
			width: 500rpx;
			height: 500rpx;
		}
	}
	
	@media screen and (max-width: 480px) {
		.preview-image {
			width: 400rpx;
			height: 400rpx;
		}
	}
</style>